<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>让坦克开起来</title>
	<style type="text/css">
		input {
			font-size: 26px;
			margin-top: 20px;
		}

		body {
			background-image: url(images/grassland.png);
		}

		#mytank {
			position: absolute;
			left: 10px;
			top: 100px
		}
	</style>
</head>

<body>
	<img id="mytank" src="images/right.png" />
	<script>
		var bgHig = window.screen.height;
		var bgWid = window.screen.width; //屏幕辨别率的高与宽
		//199000846 杨紫玲
		var otank = document.querySelector('img');
		var style = getComputedStyle(otank);
		document.onkeydown = function (e) {
			if (e.keyCode == "87" || e.keyCode == "38") {
				otank.src = 'images/up.png';
				if (otank.offsetTop >= 0) {    //对边界的限制
					otank.style.top = otank.offsetTop - 10 + "px";
				}
			}
			else if (e.keyCode == "83" || e.keyCode == "40") {
				otank.src = 'images/down.png';
				if (otank.offsetTop <= bgHig) {
					otank.style.top = otank.offsetTop + 10 + "px";
				}
			}
			else if (e.keyCode == "65" || e.keyCode == "37") {
				otank.src = 'images/left.png';
				if (otank.offsetLeft >= 0) {
					otank.style.left = otank.offsetLeft - 10 + "px";
				}
			}
			else if (e.keyCode == "68" || e.keyCode == "39") {
				otank.src = 'images/right.png';
				if (otank.offsetLeft <= bgWid) {
					otank.style.left = otank.offsetLeft + 10 + "px";
				}
			}
		}
		//199000846 杨紫玲
		window.oncontextmenu = function (e) {
			e.preventDefalut();
		}
		document.onmousedown = function () {
			if (event.button == 2) {
				alert("当前界面禁用右键！");
				return false;
			}
		}
	</script>
</body>

</html>